/* === Reset stylů === */ 

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* === Lokální fonty === */

@font-face {

  font-family: 'Lato';

  src: url('fonts/Lato-Regular.woff2') format('woff2'),

       url('fonts/Lato-Regular.woff') format('woff');

  font-weight: 400;

  font-style: normal;

}



@font-face {

  font-family: 'Playfair Display';

  src: url('fonts/PlayfairDisplay-Bold.woff2') format('woff2'),

       url('fonts/PlayfairDisplay-Bold.woff') format('woff');

  font-weight: 700;

  font-style: normal;

}



/* === Layout === */

body {

  display: flex;

  font-family: 'Lato', sans-serif;

  font-weight: 400;

  min-height: 100vh;

  background-color: #109255;

  color: #f4f4f4;

  margin: 0;

}



/* === Sidebar === */

.sidebar {

  width: 220px;

  background: #c4c6c7; /* světlejší varianta */

  color: #1a1a2e;       /* tmavší písmo pro obsah */

  padding: 0;

  box-shadow: 4px 0 10px rgba(0,0,0,0.4);

  border-right: 2px solid #c0c0c0;

  display: flex;

  flex-direction: column;

  align-items: center;

  flex-shrink: 0;

}



/* === Logo v sidebaru === */

.sidebar-logo {

  width: 100%;

  height: 90px; /* stejné jako header */

  margin: 0;

  padding: 0;

}



.sidebar-logo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;  /* odstraní mezery okolo loga */

}



.sidebar .logo {

  margin-top: 8px;  /* odsazení nápisu Menu od loga */

}



/* Menu */

.sidebar .menu {

  width: 100%;

  padding-top: 10px; /* posun menu dolů pod logo o cca 1mm */

}



.sidebar .menu li {

  list-style: none;

  position: relative; /* pro flyout submenu */

}



.sidebar .menu a {

  display: block;

  color: #131320; /* tmavé písmo */

  text-decoration: none;

  padding: 12px 10px;

  font-size: 1.2em;

  font-weight: 700;

  text-align: center;

  transition: all 0.3s ease;

  letter-spacing: 1px;

}



.sidebar .menu a:hover,

.sidebar .menu a.active {

  background: linear-gradient(90deg, rgba(192,192,192,0.25), rgba(224,224,224,0.15));

  color: #000;

  font-size: 1.25em;

}



/* === Flyout submenu === */

.submenu-items {

  position: absolute;

  left: 100%;           /* vedle sidebaru */

  top: 0;

  width: 220px;

  max-height: 400px;    /* omezení výšky */

  overflow-y: auto;     /* scroll pokud hodně položek */

  background: #d0d4da;

  display: none;

  padding: 10px 0;

  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);

  border-left: 2px solid #c0c0c0;

  z-index: 1000;

  border-radius: 4px;

}



.sidebar .menu li:hover .submenu-items {

  display: block;

}



.submenu-items a {

  display: block;

  padding: 8px 12px;

  font-size: 1em;

  color: #1a1a2e; /* tmavé písmo */

  text-decoration: none;

  transition: background 0.2s;

}



.submenu-items a:hover {

  background: rgba(0,0,0,0.05);

}



/* === Obsah === */

.content {

  flex: 1;

  padding: 0;

  background-color: transparent;

}



/* === Header === */

.page-header {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  background-color: #000000;

  color: #f9f9f9;

  height: 90px;

  border-bottom: 3px solid #c0c0c0;

  box-shadow: 0 6px 14px rgba(0,0,0,0.4);

  position: relative;

  overflow: hidden;

  flex: 1;

}



.page-header::after {

  content: "";

  position: absolute;

  top: 0;

  left: -75%;

  width: 50%;

  height: 100%;

  background: linear-gradient(

    120deg,

    rgba(255,255,255,0.1) 0%,

    rgba(255,255,255,0.3) 50%,

    rgba(255,255,255,0.1) 100%

  );

  transform: skewX(-20deg);

  animation: shine 6s infinite;

}



@keyframes shine {

  0% { left: -75%; }

  50% { left: 125%; }

  100% { left: 125%; }

}



/* Obsah stránky */

#page-content {

  opacity: 1;

  transition: opacity 0.3s ease;

  padding: 30px;

}



#page-content.fade-in {

  opacity: 1;

}



/* Grid pro produkty */

.big-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 12px;

  margin-top: 12px;

}



.big-grid img {

  width: 100%;

  height: 150px;

  object-fit: cover;

  border-radius: 6px;

}



.card {

  background-color: #fff;

  color: #1a1a2e; /* tmavé písmo */

  padding: 10px;

  border-radius: 6px;

  text-align: center;

  transition: all 0.3s ease;

}



.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 6px 12px rgba(0,0,0,0.4);

  border: 1px solid #c0c0c0;

}



/* Carousel */

.carousel {

  position: relative;

  width: 100%;

  max-width: 1300px;

  margin: auto;

  overflow: hidden;

  border-radius: 10px;

}



.carousel-track {

  display: flex;

  transition: transform 0.5s ease-in-out;

  will-change: transform;

  transform: translateZ(0); /* fix renderingu */

}



.slide {

  flex: 0 0 100%; /* přesná šířka */

}



.carousel img {

  width: 100%;

  height: 650px;

  object-fit: cover;

  object-position: center 40%;

  display: block;

}



/* Buttons */

.carousel-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0,0,0,0.4);

  color: white;

  border: none;

  font-size: 32px;

  padding: 8px 12px;

  cursor: pointer;

  border-radius: 6px;

  transition: 0.2s;

  z-index: 10;

}



.carousel-btn:hover {

  background: rgba(0,0,0,0.7);

}



.carousel-prev { left: 10px; }

.carousel-next { right: 10px; }



/* --- Responsivní drobné úpravy pro malé obrazovky --- */

@media (max-width: 768px) {

  .carousel-btn {

    font-size: 24px;

    padding: 6px 10px;

  }

}



/* Responzivní */

@media (max-width: 768px) {

  body { flex-direction: column; }

  .sidebar { width: 100%; display: flex; overflow-x: auto; }

  .sidebar .menu { display: flex; flex-direction: row; }

  .sidebar .menu li { margin-right: 10px; }

  .submenu-items { 

    position: relative; 

    left: 0; 

    top: 0; 

    width: auto; 

    max-height: none; 

    overflow: visible; 

    display: none; 

    padding: 0; 

    border: none; 

    box-shadow: none; 

    border-radius: 0;

  }

  .sidebar .menu li:hover .submenu-items { display: block; }

  .page-header { width: 100%; margin-left: 0; }

}



/* Video grid */

.video-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 20px;

  margin-top: 0px;

}



.video-grid video {

  width: 100%;

  height: 220px;

  border-radius: 6px;

  outline: none;

  border: 2px solid #c0c0c0;

  object-fit: cover;

  background: black;

}



/* === Kontakty a O nás === */

.kontakt,

.onas {

  text-align: center;

  font-size: 1.8em;

  font-weight: 700;

  color: #0d1420; /* tmavě modré až černé */

  margin-top: 3cm;

}



.onas {

  font-size: 1.4em;

  margin-top: 10px;

  text-align: left;

}



.image-caption {

  margin-top: 8px;

  font-size: 0.9em;

  color: #0b1d3a; /* tmavé písmo */

}



/* ============================= */

/* ZÁKAZ STAHOVÁNÍ + LIGHTBOX    */

/* ============================= */



/* Zakázání výběru a dragování */

img, video {

  -webkit-user-drag: none;

  user-drag: none;

  user-select: none;

}



/* === Lightbox (zvětšení obrázku) === */

.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0,0,0,0.85);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  cursor: zoom-out;

}



.lightbox img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 8px;

  box-shadow: 0 0 40px rgba(255,255,255,0.25);

}



/* === Ochrana videí === */

.video-wrapper {

  position: relative;

}



.video-shield {

  position: absolute;

  inset: 0;

  z-index: 2;

}